<template>
    <div class="container" 
        element-loading-text="拼命加载中"
        element-loading-color="#fff"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        v-loading="loading">
         <div class="logo">
            <img src="../assets/otto/logo.png" alt="">
         </div>
         <div class="title">
            <div class="left">
                <div class="t1">
                
                </div>
                
            </div>
            <div class="right">
                    <!-- <div v-for="item,index in times" class="time" :key="index">
                        {{item}}
                    </div> -->
                <div class="time-box">
                    <div class="time">{{ times[0] }}</div>
                    <div class="poit"></div>
                    <div class="time">{{ times[1] }}</div>
                    <div class="poit"></div>
                    <div class="time">{{ times[2] }}</div>
                </div>
                <div class="date">
                    <div>{{ month }}/{{ day }}</div>
                    <div class="year">{{ year }}</div>
                </div>
            </div>
         </div>

         <div class="check">
                <div class="left">
                    <div class="icon"></div>
                    <div class="name">{{ name }}</div>
                </div>
                <div class="right" @click="checkName" v-show="columns.length!==1">
                    <div class="icon"></div>
                    <div >切换</div>
                </div>
            </div>
         <div class="equipment">
            <div class="left">
                <div class="icon">
                    <img  src="../assets/otto/icon-color.png"/>
                </div>
                <div class="equipment-title">设备选择</div>
            </div>
            <div class="right">
                <div class="house">{{ warehouse }}</div>
                <div class="icon"> </div>
            </div>
         </div>

         <div class="card-box">
            <div class="card">
                <div class="top">
                    <div class="left">
                        <div class="icon">
                            <img  src="../assets/otto/icon-o2.png"/>
                        </div>
                        <div class="type">氧气</div>
                    </div>
                    <div class="right">
                        报警值： <span>{{ o2v1 }}%</span>
                    </div>
                </div>
                <div class="center">
                    <div class="left">
                        <!-- <img src="../assets/otto/jiantou.png" /> -->
                         <Panel :value="o2current" />
                    </div>
                    <div class="right">
                        <div class="current">
                            {{ o2current }}%
                        </div>
                        <div class="text">
                            当前气体数据
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    氧气(低于{{ o2limit }}%禁止入库操作)
                </div>
            </div>
            
            <div class="text">
                <div>氧气含量低于19.5%禁止入库操作。</div>
                <div>在粮仓等有限空间作业中，‌安全措施的严格执行对于保障工作人员的生命安全和身体健康至关重要。‌在进行入库作业前，‌必须检测仓内氧气浓度，‌如果氧气浓度低于19.5%，‌则禁止入仓操作。</div>
            </div>
         </div>

        <div class="card-box">
            <div class="card">
                <div class="top">
                    <div class="left">
                        <div class="icon">
                            <img  src="../assets/otto/icon-s.png"/>
                        </div>
                        <div class="type">磷化氢</div>
                    </div>
                    <div class="right">
                        报警值： <span>{{ lhqv1 }}%</span>
                    </div>
                </div>
                <div class="center">
                    <div class="left">
                        <!-- <img src="../assets/otto/jiantou.png" /> -->
                         <Panellhq :value="lhqcurrent" />
                    </div>
                    <div class="right">
                        <div class="current">
                            {{ lhqcurrent }}%
                        </div>
                        <div class="text">
                            当前气体数据
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    有毒气体(高于{{ lhqlimit }}%禁止入库操作)
                </div>
            </div>
            <div class="text">
                <div>磷化氢气体浓度不应高于0.2毫升/立方米。</div>
                <div>磷化氢气体浓度高于0.2 毫升/立方米时，作业人员必须佩戴空气呼吸器。</div>
            </div>
        </div>

        <!-- <zixunList /> -->
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
                :show-toolbar="true"
                :columns="columns"
                @confirm="handleCheckName"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>

<script>
import zixunList from './components/zixunList.vue'
import Panel from './components/panel.vue'
import Panellhq from './components/panellhq.vue'
export default {
    components:{
        zixunList, Panel, Panellhq
    },
    data() {
        return {
            o2v1: 19.5,
            o2current: '0.00',  
            o2limit: 19.5,
            lhqv1: 0.2,
            lhqcurrent: '0.00',
            lhqlimit: 0.2,
            loading: false,
            times: [],
            year: 2024,
            month: 7,
            day: 16,
            deptId: null,
            warehouse: '12号仓',
            name: localStorage.getItem('deptName') || '',
            showPicker: false,
            columns: []
        }
    },
    beforeMount() {
        this.deptId = this.$route.query.deptId;
        // 获取气体数据
        this.laodData()
    },
    mounted() {
        setInterval(()=>{
            this.laodData()
        }, 1000 * 60)
        setInterval(this.initTime, 1000)
        this.fetchNameList()
    },
    methods: {
        laodData() {
            let that  = this;
            this.loading = true;
            this.$qitiApi.qiti.getGasData(this.deptId).then(res=>{
                const {code, data} = res;
                if(code==0) {
                    that.o2current = data.data;
                    that.lhqcurrent = data.lhqData == 0 ? '0.00' : data.lhqData;
                    that.loading  = false;
                    let flag = data.flag;
                    if(flag===400) {
                        that.$message.warning(data.msg)
                    } else if(flag===500) {
                        that.$message.error(data.msg)
                    }
                }
                that.loading  = false;
            })
        },
        initTime() {
            this.times = []
            let current = []
            let timeString = new Date().toLocaleTimeString();
            timeString.split(':').forEach(item=>{
                current.push(item+"")    
            })
            this.times = current;
            let date = new Date()
            this.year = date.getFullYear()
            this.month = date.getMonth() + 1;
            this.day = date.getDate();
        },
        fetchNameList() {
            let userId = localStorage.getItem("userIdqiti") || 0
            this.$qitiApi.qiti.getNameListTwo(userId).then(res=>{
                this.columns = res.map(e=>{
                    let item = {
                        text: e.deptName,
                        value:e.deptId,
                    }
                    return item;
                })
            })
        },
        checkName() {
           this.showPicker = true;
        },
        handleCheckName(e) {
            // 存 库区名字 
            localStorage.setItem("deptName", e.text);
            this.deptId = e.value;
            this.name = e.text;
            this.$router.push({
                path: "/qiti/homeqiti",
                query: {
                    deptId: this.deptId
                }
            })
            this.laodData()
            this.showPicker = false;
        }
    }
}
</script>



<style scoped>
/deep/ .el-icon-loading:before {
    content: "\E6CF";
    color: #fff;
    font-size: 24px;
}
/deep/ .el-loading-spinner .el-loading-text {
    color: #fff;
    margin: 3px 0;
    font-size: 20px;
}


* {
    box-sizing: border-box;
}
.container {
    height: 100vh;
    width: 100%;
    background: url('../assets/otto/backNext.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}
.container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.logo {
    height: 22px;
    width: 116px;
    /* background: url('../assets/otto/logo.png') no-repeat 0px 0px;
    background-size: 100% 100%; */
    margin-top: 25px;
}

.logo img {
    height: 100%;
    width: 100%;
}





.check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    background: url('../assets/otto/checkBg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    padding: 10px 10px;
    
}


.check .left {
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
}

.check .left .icon {
    height: 20px;
    width: 20px;
    background: url('../assets/otto/icon-didian.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-right: 2px;
    
}

.check .right {
    display: flex;
    align-items: center;
    color: white;
    font-size: 12px;
}

.check .right .icon {
    height: 12px;
    width: 12px;
    background: url('../assets/otto/icon-check.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-right: 2px;
    
}


.title {
    width: 100%;
    margin-top: 20px;
    color: #003D79;
    font-size: 27px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    align-items: end;
}
.title .t1 {
    height: 64px;
    width: 100px;
    background: url('../assets/otto/icon-title.png') no-repeat 0px 0px;
    background-size: 100% 100%;
}
/* .title .t2 {
    padding-left: 26px;
    margin-top: 10px;
} */


/* 时间 */
.title .right {
    width:  150px;
    height: 50px;
    background: url('../assets/otto/date-box.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 0;
}

.title .right .time-box {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 5px 0 10px;
}

.title .right .time-box .poit {
    height: 70%;
    width: 5px;
    background: url('../assets/otto/time.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-bottom: 10px;
}
.title .right .time-box .time {
    font-size: 18px;
    font-weight: bold;
    text-align:center;
    color: #004F9D;
}

.date {
    min-width: 30px;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 900;
    text-align:center;
}

.date .year {
    color: white;
    background-color: #0063C5;
    border-radius: 3px;
    padding: 2px;
    
}

.equipment {
    width: 90%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 10px;
    padding: 12px 16px;
    
}
.equipment .left {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.equipment .left .icon img {
    height: 20px;
    width: 20px;
    margin-right: 8px;
}
.equipment .left .equipment-title {
    color: #0052A3;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.equipment .right {
    width: 71px;
    height: 28px;
    background-color: #0052A3;
    border-radius: 5px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.equipment .right .house {
    color: #fff;
    font-size: 12px;
}
.equipment .right .icon {
    height: 10px;
    width: 8px;
    background: url('../assets/otto/zx/icon-right-light.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    
}


.card-box {
    background-color: #F7FBFF;
    width: 90%;
    margin: 0px auto;
    border-radius: 8px;
    margin-top: 10px;   
}

/* 底部距离 */
.card-box:nth-last-child(2) {
    margin-bottom: 70px;
}
.card-box .text {
    font-size: 11px;
    color: #003D79;
    padding: 10px 16px;
    line-height: 15px;
    font-weight: 800;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: #dcdcdc 0px 2px 10px;
}


.card .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 10px;
}
.card .icon img {
    height: 20px;
    width: 20px;
    margin-right: 8px;
}
.card .top .left {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.card .top .right {
    color: #003D79;
    font-size: 16px;
    font-weight: 600;
}

.card .top .right span {
    color: #F35B5B;
}

.card .center {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.card .center .left img{
    width: 125px;
    height: 74p;
}

.card .center .right {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}

.card .center .right .current {
    font-size: 30px;
    font-weight: 600;
    color: #003D79;
    padding-right: 12px;

}
.card .center .right .text {
    font-size: 14px;
    color: #003D79;
}

.card .bottom {
    background-color: #f3d4d4;
    color: #F35B5B;
    border-radius: 4px;
    padding: 3px 10px;
    text-align: center;
    font-size: 14px;

}





</style>